<div class="overlay"></div>
<div class="content-threshold">
  <a href="#" class="close"><svg><use xlink:href="#shape-close"></use></svg></a>
  <header>
    <h2>Adjust the minimum canopy density for tree cover and tree cover loss<p><a href="#" class="source" data-source="canopy"><svg><use xlink:href="#shape-info"></use></svg></a></p></h2>

  </header>
  <div class="trees">
    <span class="tree-icon"></span>
    <span class="forest-icon"></span>
  </div>
  <div class="slider-container">
    <ul id="labels-threshold">
      {{#each values}}
        <li data-slider-value="{{@index}}">{{this}}%</li>
      {{/each}}
    </ul>
    <div class="range-box">
      <div class="dots"></div>
      <div id="progress-threshold" class="progress"></div>
      <input id="range-threshold" type="range" min="0" max="6" value="4" step="1">
    </div>
  </div>
</div>
